<template>
  <div class="meteragereport-manage">
    <div class="right-box">
      <div class="operate_wrap flexDiv">
        <div class="flex-center">
          <el-button
            type="primary"
            size="small"
            class="add buildButtonStyle"
            @click="clickAdd('build')"
            v-permission="permission.add"
          ><i class="iconfont icon-icon_add"></i> 新增变更
          </el-button>
        </div>
        <div class="flex-center change-input-color">
        </div>
      </div>
      <div class="list_wrap WholeScroll">
        <el-table
          class="table-three-blue"
          :border="true"
          :row-class-name="tableRowStyleName"
          :cell-class-name="tableCellStyleName"
          :header-cell-class-name="tableHeaderCellStyleName"
          :stripe="true"
          :data="list"
          style="width: 99%;margin-top:10px;"
          size="medium"
          @cell-click="cellClick"
        >
          <el-table-column
            show-overflow-tooltip
            label="序号"
            width="60">
            <template slot-scope="scope">
              <span>{{search.pageNo * search.pageSize + scope.row.listIndex + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="companyName"
            width="160"
            label="公司名称">
            <template slot-scope="scope">
              <div style="text-align: start">{{scope.row.companyName}}</div>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="postName"
            width="160"
            label="岗位">
            <template slot-scope="scope">
              <div style="text-align: start">{{scope.row.postName}}</div>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="name"
            label="变更前姓名"
            width="100">
            <template slot-scope="scope">
              <div style="text-align: start">{{scope.row.beforeChangeName}}</div>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="name"
            label="变更前身份证号码"
            width="160">
            <template slot-scope="scope">
              <div style="text-align: start">{{scope.row.beforeChangeIdcard}}</div>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="name"
            label="变更后姓名"
            width="100">
            <template slot-scope="scope">
              <div style="text-align: start">{{scope.row.afterChangeName}}</div>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="name"
            label="变更后身份证号码"
            width="160">
            <template slot-scope="scope">
              <div style="text-align: start">{{scope.row.afterChangeIdcard}}</div>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="inTime" label="变更时间" min-width="120">
            <template slot-scope="scope">
              {{scope.row.createTime}}
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="nodeName"
            label="审核状态"
            style="text-align: left"
            width="170">
            <template slot-scope="scope">
              <div v-if="scope.row.nodeName" style="text-align: left;" v-html="scope.row.nodeName"></div>
              <div v-else style="text-align: left;">待上报</div>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            min-width="300"
            label="操作"
            fixed="right"
          >
            <template slot-scope="scope">
              <work-flow-btn :row="scope.row" :type="2" @edit="edit" @del="del" @approve="approve" @detail="detail"/>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="float: right; margin-top: 10px;"
          layout="prev, pager, next"
          :page-size="search.pageSize"
          :total="search.total"
          :current-page="search.pageNo + 1"
          :prev-text="tablePaginationPrev"
          :next-text="tablePaginationNext"
          @current-change="paginationChange"
        >
        </el-pagination>
      </div>
    </div>

    <Detail :postDetail="postDetailData" @reloadList="getList(true)"></Detail>

  </div>
</template>

<script>
import {
  tableRowStyleGol,
  tableCellStyleGol,
  tableHeaderCellStyleGol,
  doCreateObject
} from '@/utils/publicFun'

import contractor from '@/api/buss/contractorManagement'
import personChange from '@/api/buss/personChange'
import msgUtil from '@/utils/msgUtil'
import WorkFlowBtn from '@/components/WorkFlow/table'

export default {
  name: 'in-out-sign',
  components: {
    Detail: require(`./people-change-detail`).default,
    WorkFlowBtn,
  },
  props:{
    chooseData:{
      type: Object,
      default:{
        name: ''
      }
    },
    routerData:{
      type: Object,
      default:{
        name: ''
      }
    }
  },
  data() {
    return {
      scoreArray:[],
      contractorManagementId:'',
      contractorCompanyName:'',
      projectTree:[],
      leftList:[{}],
      rightList:[{}],
      chooseLeftIndex: null,
      permission:{//承包商的权限
        add: ['100', '1001066:add'],
        show: ['100', '1001066:show'],
        edit: ['100', '1001066:edit'],
        del: ['100', '1001066:del'],
      },
      tableRowStyleName: tableRowStyleGol,
      tableCellStyleName: tableCellStyleGol,
      tableHeaderCellStyleName: tableHeaderCellStyleGol,
      tablePaginationPrev: '上一页',
      tablePaginationNext: '下一页',
      title: '',
      showSelectDialog: false,
      showReportDialog: false,
      selectedIds:[],
      // 搜索参数
      search: {
        total:0,
        pageIndex: 0,
        pageNo:0,
        pageSize: 10,
        pageSum: 0,
        name:'',
        peopleStatus:'',
        sectionId:'',
      },
      postDetailData: {
        show: false,
        type: 'build'
      },
      list: [],
      data: {},

      activeName: 'first',

      navigationIndex:0,
      chooseTitle:'',
      rightDrawer:false,
      leftDrawer: false,
      showPeopleNum: false,
      showSonList: false,
      sectionId:'',
      projectId:'',
      personType:'',
    }
  },
  mounted() {
    this.intiClick();
  },
  watch:{
    'chooseData': {
      immediate: true,
      handler(val) {
        this.search.sectionId = val.id
        this.projectId = val.pid
        this.personType = val.personType
        this.type = val.type
        if(val.personType == '3'){
          this.showPeopleNum = true
        }else {
          this.showPeopleNum = false
        }
      },
      deep: true
    },
    'routerData': {
      immediate: false,
      handler(val) {
        this.search.sectionId = val.sectionId
        this.projectId = val.projectId
        this.personType = val.personType
        this.type = val.type
        if(val.personType == '3'){
          this.showPeopleNum = true
        }else {
          this.showPeopleNum = false
        }
        this.getList()
      },
      deep: true
    },
  },
  methods: {
    cellClick(row, column, cell, event) {
      // console.log(row, column, cell, event)
      console.log(column)
      if (column.property === 'postName') {
        let params = {}
        params.sectionId = this.search.sectionId
        params.projectId = this.projectId
        params.type = this.type
        this.postDetailData = {
          show: true,
          type: 'check',
          typeName: '查看',
          detailId: row.id,
          params
        }
      }
    },
    approve(obj) {
      let params = {}
      params.sectionId = this.search.sectionId
      params.projectId = this.projectId
      params.type = this.type
      this.postDetailData = {
        show: true,
        type: 'approve',
        typeName: '审核',
        detailId: obj.id,
        params
      }
    },
    edit(obj) {
      let params = {}
      params.sectionId = this.search.sectionId
      params.projectId = this.projectId
      params.type = this.type
      this.postDetailData = {
        show: true,
        type: 'edit',
        typeName: '编辑',
        detailId: obj.id,
        params
      }
    },
    detail(obj) {
      let params = {}
      params.sectionId = this.search.sectionId
      params.projectId = this.projectId
      params.type = this.type
      this.postDetailData = {
        show: true,
        type: 'check',
        typeName: '查看',
        detailId: obj.id,
        params
      }
    },
    del(obj) {
      this.showDialog('delete','删除',obj.id)
    },
    clickAdd(val){
      this.showDetailDialog(val)
    },
    /*  操作 */
    showDialog(type, typeName, detailId) {//承包商列表页操作按钮的处理
      let params = {}
      switch (type){
        case 'build':
          params.sectionId = this.search.sectionId
          params.projectId = this.projectId
          params.type = this.type
          this.postDetailData = {
            show: true,
            type: type,
            typeName: typeName,
            detailId: '',
            params
          }
          break
        case 'edit':
          params.sectionId = this.search.sectionId
          params.projectId = this.projectId
          params.type = this.type
          this.postDetailData = {
            show: true,
            type: type,
            typeName: typeName,
            detailId: detailId,
            params
          }
          break
        case 'check':
          params.sectionId = this.search.sectionId
          params.projectId = this.projectId
          params.type = this.type
          this.postDetailData = {
            show: true,
            type: type,
            typeName: typeName,
            detailId: detailId,
            params
          }
          break

        case 'delete':
          if (detailId === '') {
            msgUtil.error2('请先选择要删除的记录！')
            return
          }
          msgUtil.confirm('确认删除该条数据?').then(res => {
            let idlist=[]
            idlist.push(detailId)
            let param={
              ids:idlist
            }
            personChange.del(param).then(res=>{
              if (res.code === 200) {
                msgUtil.success2('删除成功!')
                this.getList()
              }else {
                msgUtil.error2(res.data.message)
              }
            })
          })
          break

      }
    },
    paginationChange(index) {
      this.search.pageNo = index - 1
      this.getList()
    },


    intiClick(){
      this.search.pageNo = 0
      this.getList();
    },


    // 获取列表 api
    getList(reload) {
      if (reload) {
        this.search.pageNo = 0
        delete this.search.id
      }else{

        if(this.$route.query.id){
          this.search = {}
          this.search.pageIndex = 0
          this.search.pageSize = 10
          this.search.pageSum = 0
          this.search.pageNo = 0
          this.search.id=this.$route.query.id
        }
    }

      personChange.getTablePage(this.search).then(res => {
        console.log(res)
        if (res.code === 200) {
          this.list = []
          res.data.content.forEach((item, index) => {
            item.listIndex = index
          })
          this.list = res.data.content
          this.search.total = parseInt(res.data.totalElements)
        } else {
          this.$messageError(res.data.message)
        }
      }).catch(res => {
        console.log('请求出现错误', res);
        this.$messageError('请求失败')
      })
    },
    // 显示详情弹窗 不同状态
    showDetailDialog(flag) {
      let params = {}
      params.sectionId = this.search.sectionId
      params.projectId = this.projectId
      params.type = this.type
      switch (flag) {
        case 'build':
          this.postDetailData = {
            show: true,
            type: 'build',
            params: params
          }
          break
        //查看
        case 'show':
          params.tableName = this.search.tableName;
          this.postDetailData = {
            show: true,
            type: 'check',
            detailId:params.detailId,
            params: params
          }
          break
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .bottom-button-box {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 15px;
    .button-box {
      border-radius: 5px;
      background-color: white;
      cursor: pointer;
      margin-right: 20px;
      margin-top: 15px;
      min-width: 110px;
      border: 1px solid rgba(144,144,144,0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      p {
        padding: 0;
        margin: 0 30px;
        white-space: nowrap;
      }
      p:nth-of-type(1) {
        font-size: 16px;
        font-weight: bold;
        margin-top: 10px;
      }

      p:nth-of-type(2) {
        font-size: 12px;
        margin-bottom: 10px;
      }

      span {
        font-size: 12px;
      }
    }
    .button-box.selected {
      background-color: #09ABF6;
      p {
        color: white;
      }
      span {
        color: white;
      }
    }
  }

  .navigation2{
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    border-bottom: 1px solid #313e50;
    margin-top: 5px;
    border-bottom: 1px solid #e2e8ec!important;
    .el-button{
      height: 40px;
      border: 1px solid #374256;
      font-family: PingFangSC-Regular;
      border-radius: 5px 5px 0 0;
      min-width: 95px;
      font-size: 14px;
      color: #8190a7;
      background: #09abf6!important; border: 1px solid #09abf6!important; color: #fff!important;
      border-bottom: none!important;
      &:hover{
        background-color: #F2F2F2!important; color: #2AA7DC!important;
      }
    }
    /*选中样式*/
    .el-button[selected]{
      border: 1px solid #2AA7DC!important; border-bottom: 1px solid #F2F2F2!important; color: #2AA7DC!important;
      background-color: #F2F2F2!important;
    }
  }
  .operate_wrap2 {
    display: flex;
    align-items: center;
    height: 40px;
    width: 100%;
    box-sizing: border-box;

    .el-button, .el-select, .el-input {
      border-radius: 4px;
      font-family: PingFangSC-Medium;
      font-size: 14px;
      display: inline-block;
    }

    .el-date-editor--daterange {
      width: 300px;
    }

    .delete {
      width: 88px;
    }

    .search {
      width: 88px;
      float: right;
      color: #fff;
      margin-left: 10px;
    }

    .el-select {
      width: 140px;
      margin-left: 10px;
    }

    .input {
      width: 140px;
      float: right;
      margin-left: 10px;
      color: #3E556E;
    }
  }

  .operate_wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    width: 100%;
    box-sizing: border-box;

    .el-button, .el-select, .el-input {
      border-radius: 4px;
      font-family: PingFangSC-Medium;
      font-size: 14px;
      display: inline-block;
    }

    .el-date-editor--daterange {
      width: 300px;
    }

    .delete {
      width: 88px;
    }

    .search {
      width: 88px;
      float: right;
      color: #fff;
      margin-left: 10px;
    }

    .el-select {
      width: 140px;
      float: right;
      margin-left: 10px;
    }

    .input {
      width: 140px;
      float: right;
      margin-left: 10px;
      color: #3E556E;
    }
  }
  .list_wrap {
    margin-top: 20px;
  }
  .rowFileImg{
    cursor: pointer;
    width: 18px;
  }
  .flex-row{
    display: flex;
    flex-direction: row;
  }
  .flex-row-hv{
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .left-box{
    min-width: 200px;
    border-right: 1px #e2e8ec  solid ;
    p{
      cursor: pointer;
      font-size: 14px;
    }
  }
  .right-box{
    width: 100%;
  }
  .chooseText{
    color: #3270ef ;
  }
  .buttonDiv {
    position: absolute;
    cursor: pointer;
    width: 11px;
    font-size: 14px;
    top: 44%;
    height: 60px;
    line-height: 60px;
    color: #ffffff;
    z-index: 1;
    transition: left 1s;
    -moz-transition: left 1s; /* Firefox 4 */
    -webkit-transition: left 1s; /* Safari and Chrome */
    -o-transition: left 1s; /* Opera */
  }

  .buttonLeft {
    left: -15px;
    background: rgb(55, 66, 86);
    border-radius: 0 8px 8px 0;
  }

  .buttonRight {
    left: calc(12% - 11px);
    background: #33475d;
    border-radius: 8px 0 0 8px;
  }

  .demoClass {
    text-align: left !important;
  }

  .as-button-hidden {
    display: unset;
    width: 0px;
    height: 0px;
    position: absolute;
    opacity: 0%;
  }
  /*.show-ellipsis {*/
  /*display: block;*/
  /*width: 100%;*/
  /*overflow: hidden;*/
  /*white-space: nowrap;*/
  /*text-overflow: ellipsis;*/
  /*}*/
  .omit {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .title-box{
    font-size: 16px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.85);
    margin: 17px;
  }
  .flex-row-center{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .pstyle{
    p{
      padding: 5px 15px;
      margin: 0;
    }
  }
</style>
